<template>
  <div class="material-print" ref="print">
    <h2>成品基本档</h2>
    <table  cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>序号</th>
          <th>物料编码</th>
          <th>物料名称</th>
          <th>剂型</th>
          <th>主计量</th>
           <th>图纸号</th>
        </tr>
      </thead>
      <tbody v-if="printData.length>0">
        <tr v-for="(item,index) in printData" :key="index">
             <td>{{item.id}}</td>
          <td>{{item.code}}</td>
          <td>{{item.name}}</td>
          <td>{{item.attribute}}</td>
          <td>{{item.unitName}}</td>
             <td>{{item.drawingNo}}</td>
        </tr>
      </tbody>
    </table>
  </div>

</template>

<script>
  export default{
    data(){
      return{

      }
    },
    props:{
      printData: {
        type: Array,
        default() {
          return []
        }
      },
      title:{
        type:String,
       default() {
         return "物料单"
       }
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  @media print{
   .material-print {
     display: block!important;
   }
  }

  .material-print {
    display: none;
    h2 {
      text-align: center;
      color: #1890FF;

    }

    table {
      width: 100%;
      margin-bottom: 20px;
      border-left: 1px solid #ccc;

      th {
        text-align: center;
        font-size: 14px;
        padding: 5px;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
      }

      td {
        text-align: center;
        font-size: 13px;
        color: #606266;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        padding: 5px;
      }
    }
  }
</style>
